<template>
	<view>
		<view class="search-box">
			<uni-search-bar @input="input" class="search" radius="100" :value="keyword" cancelButton="none" placeholder="搜索商品" ref="input" :focus="true"></uni-search-bar>
		</view>
		<view class="goods-box">
			<!-- 搜索记录 -->
			<view class="history" v-if="showHistory">
				<!-- 标题 -->
				<view class="title">
					<text>搜索历史</text>
					<uni-icons type="trash" size="17" class="del" @click="delAll"></uni-icons>
				</view>
				<!-- 搜索列表 -->
				<view class="list">
					<view class="item" @click="search(item)" v-for="(item, hIndex) in historyList" :key="hIndex">{{ item }}</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods" v-if="!showHistory" v-for="(goods, index) in goodsList" :key="index" @click="gotoGoodsDetail(goods.goods_id)">
				<view class="title">{{ goods.goods_name }}</view>
				<uni-icons type="arrowright" size="17" class="icon"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timer: 0,
			keyword: '',
			goodsList: [],
			historyList: ['al', 'app', 'apple'],
			showHistory: true
		}
	},
	watch: {
		historyList() {
			this.setHisData(this.historyList)
		}
	},
	onReady() {
		this.getHisData()
	},
	methods: {
		input(e) {
			this.showHistory = e ? false : true
			this.goodsList = e ? this.goodsList : []
			clearTimeout(this.timer)
			if (!e) return
			this.timer = setTimeout(() => {
				this.getGoods(e)
				this.historyList.includes(e) || this.historyList.push(e)
			}, 500)
		},
		async getGoods(query) {
			const { statusCode, data: res } = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + query)
			if (statusCode !== 200) return
			this.goodsList = res.message
		},
		gotoGoodsDetail(id) {
			console.log(id)
			uni.navigateTo({
				url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
			})
		},
		delAll() {
			this.historyList = []
		},
		search(item) {
			this.keyword = item
		},
		async getHisData() {
			const res = await uni.getStorage({
				key: 'historyList'
			})
			this.historyList = res.data
		},
		async setHisData(historyList) {
			uni.setStorage({
				key: 'historyList',
				data: historyList,
				success: function () {
					console.log('写入成功')
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.search-box {
	z-index: 100;
	position: sticky;
	top: 0;
	width: 100%;
	background-color: #c00000;
}
// 搜索历史
.history {
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		.item {
			height: 40rpx;
			line-height: 40rpx;
			padding: 10rpx 30rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			border: 2rpx solid #f0f0f0;
		}
	}
}
// 商品列表
.goods {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding-left: 30rpx;
	margin: 10rpx 0;
	font-size: 30rpx;
	border: 2rpx solid #f0f0f0;
	.title {
		width: 90%;
		line-height: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.icon {
	}
}
</style>
